<template>
  <edit-dialog
      :centerDialogVisible="visible"
      :tilte="'文件预览'"
      :width="1000"
      align-center
      :defaultButton="false"
      @Cancel="handleCancel"
  >
    <template #content>
      <div>
        <vue-office-excel
            :src="url"
            style=" width: 100%;overflow-y: auto"
            @rendered="renderedHandler"
            @error="errorHandler"
        v-if="fileType==='xls'||fileType==='xlsx'"/>
        <vue-office-docx
            :src="url"
            style=" width: 100%;height:400px; overflow-y: auto"
            @rendered="renderedHandler"
            @error="errorHandler"
            v-if="fileType==='doc'||fileType==='docx'"/>
        <vue-office-pdf
            :src="url"
            style=" width: 100%;height:400px; overflow-y: auto"
            @rendered="renderedHandler"
            @error="errorHandler"
            v-if="fileType==='pdf'"/>
<!--        <div class="docxRef"></div>-->
      </div>
    </template>

  </edit-dialog>

</template>
<script lang="ts" setup>
import {ref, reactive, defineProps, computed, watch, onMounted, nextTick, toRaw} from "vue";
import editDialog from "@/components/editDialog/index.vue";
import VueOfficeExcel from "@vue-office/excel";
import VueOfficeDocx from '@vue-office/docx'
import VueOfficePdf from '@vue-office/pdf'
import {ElMessage} from "element-plus";
// import { renderAsync } from 'docx-preview';
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  fileType: {
    type: Array,
  },
  url: {
    type: String,
  },
});
const emit = defineEmits(['cancel'])
const renderedHandler=()=> {
  console.log("渲染完成")
}
const errorHandler=(e)=> {
  console.log("渲染失败",e)
  ElMessage.error(`文件渲染失败`)
}
const handleCancel = () => {
  emit('cancel')
}

// watch(() => props.visible, (val, oldVal) => {
//   if (val) {
//     let childRef = document.getElementsByClassName('docxRef');
//     renderAsync(props.url, childRef[0])
//   }
//
//
// })
</script>
<style scoped lang="less">

</style>
